<template>
	<el-dropdown trigger="click" @command="languageChange">
		<svg-icon name="translate"></svg-icon>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item
					v-for="language in languages"
					:key="language"
					:disabled="language.indexOf(locale) != -1"
					:command="language"
				>
					{{ messages[language].langName }}
				</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
</template>

<script setup lang="ts">
import { useI18n } from "#imports";
import { messages } from '@/i18n';

const appStore = useStore.appStore();
const tabsStore = useStore.tabsStore();
const languages = Object.keys(messages);

const { locale }: any = useI18n();
const languageChange = async (language: string) => {
	await appStore.setLanguage(language);
	locale.value = language;

	// 切换语言页面跳转
	const switchLocalePath = useSwitchLocalePath();
	await navigateTo(switchLocalePath(language as any));
	tabsStore.delAllViews();
	window.location.reload();
}
</script>
